<style lang="less" scoped>
	.record {
		width: 90%;
		margin: 0 auto;
		margin-top: 90px;
		transition: all .6s;

		.icon {
			width: 40%;
			position: absolute;
			top: 65px;
			left: 30%;
			transform-origin: top center;
			transform: rotate(-32deg);
			transition: all 0.8s;
			z-index: 600;

			img {
				width: 100%;
			}
		}

		.img {
			width: 86%;
			margin: 0 auto;
			position: relative;

			// border: ;
			img {
				width: 100%;
				border-radius: 50%;
			}

			.pic {
				width: 67%;
				position: absolute;
				left: 16.5%;
				top: 16.5%;
				transform: rotate(0deg);
				transition: transform 0.5s;
			}
		}

		.text {
			position: relative;
			margin-top: 30px;

			.name {
				color: #fefefe;
				font-size: 20px;
			}

			.author {
				position: relative;
				margin-top: 5px;
				color: #cccccc;

			}

			
		}
	}
</style>
<template>
	<view class="record">
		<div class="icon">
			<img src="../static/record_icon.png" alt="" />
		</div>
		<div class="img">
			<img src="../static/record.png" alt="" />
			<img :src=detail[0].picUrl alt="" class="pic" />
		</div>
		<div class="text">
			<div class="name">
				<span>{{detail[0].name}}</span>
			</div>
			<div class="author">
				<span>{{ detail[0].author }} ></span>
			</div>
			
		</div>
	</view>
</template>

<script>
	export default {
		name: "record",

		props: {
			detail: {
				type: Array,
				required: true
			}
		},

		data() {
			return {
				
				rate: 0,
				timer: {}
			};
		},
		methods: {
			
			rote() {
				let record = document.querySelector('.pic')
				let record_icon = document.querySelector('.icon')
				record_icon.style.transform = 'rotate(-6deg)'
				setTimeout(() => {
					this.timer = setInterval(() => {
						this.rate++
						record.style.transform = `rotate(${this.rate}deg)`
					}, 100)
				}, 300)
			},
			stopRote() {
				let record_icon = document.querySelector('.icon')
				record_icon.style.transform = 'rotate(-32deg)'
				clearInterval(this.timer)

				this.timer = null
			}
		},
		mounted() {
			if (this.detail[1]) {
				this.rote()
			} else {
				this.stopRote()
			}
		},
		watch: {

			// record.style
			detail: {
				handler(newVal) {
					// console.log('Detail changed:', newVal);
					if (newVal[1]) {
						this.rote()
					} else {
						this.stopRote()
					}
				},
				deep: true // 深度监听
			},
		}
	}
</script>